<template>
  <div>
    <!-- 面包屑 -->
    <div class="crumbs">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{path:'/'}">系统首页</el-breadcrumb-item>
        <el-breadcrumb-item>基础表单</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 容器 -->
    <div class="container">
      <div class="form-box">
        <el-form :model="form" label-width="80px">
          <el-form-item label="表单名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="手机型号">
            <el-select v-model="form.phone" style="width: 100%">
              <el-option label="苹果" value="Iphone"></el-option>
              <el-option label="化为" value="HuaWei"></el-option>
              <el-option label="小米" value="XiaoMi"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期范围">
            <el-col :span="11">
              <el-date-picker v-model="form.startDate" placeholder="开始日期" style="width: 100%"></el-date-picker>
            </el-col>
            <el-col :span="2" class="line">-</el-col>
            <el-col :span="11">
              <el-date-picker v-model="form.endDate" placeholder="结束日期" style="width: 100%"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="区域级联">
            <el-cascader :options="computedOptions" v-model="form.options" clearable style="width: 100%"></el-cascader>
          </el-form-item>
          <el-form-item label="按钮开关">
            <el-switch v-model="form.switch"></el-switch>
          </el-form-item>
          <el-form-item label="多选框">
            <el-checkbox label="苹果手机" value="Iphone" v-model="form.checkbox"></el-checkbox>
            <el-checkbox label="化为手机" value="HuaWei" v-model="form.checkbox"></el-checkbox>
            <el-checkbox label="小米手机" value="XiaoMi" v-model="form.checkbox"></el-checkbox>
          </el-form-item>
          <el-form-item label="单选框">
            <el-radio label="苹果手机" value="Iphone" v-model="form.radio"></el-radio>
            <el-radio label="化为手机" value="HuaWei" v-model="form.radio"></el-radio>
            <el-radio label="小米手机" value="XiaoMi" v-model="form.radio"></el-radio>
          </el-form-item>
          <el-form-item label="文本域">
            <el-input type="textarea" :autosize="{minRows:2,maxRows:5}" maxlength="33" placeholder="自动换行" resize="none"
                      show-word-limit clearable v-model="form.textarea"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit">提交表单</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "BasicForm",
    data() {
      return {
        form: {
          name: '',
          phone: '',
          startDate: '',
          endDate: '',
          options: [],
          switch: '',
          checkbox: [],
          radio: '',
          textarea: ''
        }
      }
    },
    methods: {
      submit() {
        let data = JSON.stringify(this.form);
        this.$confirm('确定提交表单内容？\n' + data, '提示', {type: 'info'})
          .then(() => {
            this.$message.success('提交成功');
          }).catch(() => {
            this.$message.info('取消表单提交');
          }
        )
      }
    },
    computed: {
      computedOptions() {
        return [
          {
            label: '广东省',
            value: '广东省',
            children: [
              {
                label: '广州市',
                value: '广州市',
                children: [
                  {
                    label: '天河区',
                    value: '天河区'
                  }
                ]
              }
            ]
          }, {
            label: '湖南省',
            value: '湖南省',
            children: [
              {
                label: '长沙市',
                value: '长沙市',
                children: [
                  {
                    label: '岳麓区',
                    value: '岳麓区'
                  }
                ]
              }
            ]
          }
        ]
      }
    }
  }
</script>

<style scoped>

</style>
